<template>
  <div>首页</div>
  <div :class="`${prefixCls}-container`">
    <div class="header">
      bb
      <div class="img">cc</div>
    </div>
    <div class="body">
      <a>aaaa</a>
    </div>
  </div>
</template>
<script setup lang="ts" name="Home">
import { useDesign } from "@/hooks/useDesign";

const { getPrefixCls } = useDesign();

const prefixCls = getPrefixCls("home");

/*import Logger from "@/utils/Logger";
const obj: {
  a: number;
  b: string;
  c: boolean;
} = {
  a: 1,
  b: "hello word",
  c: true
};
console.log(Object.prototype.toString.call(obj));
Logger.printBack("对象", obj);
console.log("=================");
const arr: number[] = [1, 2, 3];
console.log(Object.prototype.toString.call(arr));
Logger.printBack("数组", arr);
console.log("=================");
const tuples: [number, boolean] = [1, true];
console.log(Object.prototype.toString.call(tuples));
Logger.printBack("元组", tuples);
console.log("=================");
const str: string = "hello world";
console.log(Object.prototype.toString.call(str));
Logger.printBack("字符串", str);
console.log("=================");
const num: number = 11223;
console.log(Object.prototype.toString.call(num));
Logger.prettySuccess("数字", num);
console.log("=================");
console.log(Object.prototype.toString.call(true));
Logger.prettySuccess("boolean", true);
console.log("=================");
console.log(Object.prototype.toString.call(undefined));
Logger.prettySuccess("undefined", undefined);
console.log("=================");
const nulls: number = null;
console.log(Object.prototype.toString.call(nulls));
Logger.prettySuccess("null", nulls);
console.log("=================", typeof nulls === "object");
const un: unknown = 123;
console.log(Object.prototype.toString.call(un));
Logger.prettySuccess("unknown", un);
console.log("=================");
const anys: any = "123";
console.log(Object.prototype.toString.call(anys));
Logger.prettySuccess("any", anys);*/
</script>

<style scoped lang="scss">
$prefix-cls: #{$namespace}-home;
.#{$prefix-cls}-container {
  width: 100%;
  margin: 0;
  color: red;
  background-color: #42b883;
  font: {
    size: 1em;
    weight: normal;
  }

  .header {
    background-color: rosybrown;

    .img {
      width: 100px;
      height: 60px;
      background-color: #647eff;
    }
  }

  .body {
    a {
      color: #ddd;

      &:hover {
        color: #f00;
        text-decoration: underline;
      }
    }
  }
}
</style>
